<template>
  <el-aside :style="{width:asideWidth}" style="overflow:hidden;border-right: solid 1px #e6e6e6;">
    <el-row class="aya-circle" :class="{'aya-mini':isCollapse}">
      <p class="aya-circle--name">{{userName}}</p>
      <i class="aya-circle--index">99人</i>
      <el-button class="aya-circle--tool" :icon="isCollapse?'el-icon-arrow-right':'el-icon-arrow-left'" circle  @click="isCollapse = !isCollapse"></el-button>
    </el-row>
    <el-menu default-active="1" :collapse-transition="false" :collapse="isCollapse">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-star-off"></i>
          <span>我的快捷</span>
        </template>
        <el-menu-item index="1-1"><router-link to="todos">我的待办</router-link></el-menu-item>
        <el-menu-item index="1-2">邮件</el-menu-item>
        <el-menu-item index="1-3">通讯录-要不要开发</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-news"></i>
          <span>协作</span>
        </template>
        <el-menu-item index="2-1">我的待办</el-menu-item>
        <el-menu-item index="2-2">我的已办</el-menu-item>
        <el-menu-item index="2-3">我的消息</el-menu-item>
        <el-menu-item index="2-4">发起会议</el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-sort"></i>
          <span>流程</span>
        </template>
        <el-menu-item index="3-1">发起流程</el-menu-item>
        <el-menu-item index="3-2">我的流程</el-menu-item>
        <el-menu-item index="3-3">流程配置</el-menu-item>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-phone-outline"></i>
          <span>通讯</span>
        </template>
        <el-menu-item index="4-1">发起消息</el-menu-item>
        <el-menu-item index="4-2">我的消息</el-menu-item>
      </el-submenu>
      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-mobile-phone"></i>
          <span>工具</span>
        </template>
        <el-menu-item index="5-1">发起消息</el-menu-item>
        <el-menu-item index="5-2">我的消息</el-menu-item>
      </el-submenu>
      <el-submenu index="6">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span>管理</span>
        </template>
        <el-menu-item index="6-1"><router-link to="/about">会议室管理</router-link></el-menu-item>
        <el-menu-item index="6-2"><router-link to="/personal/description">管理员配置</router-link></el-menu-item>
        <el-menu-item index="6-3">管理员配置</el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  computed: {
    asideWidth() {
      return this.isCollapse ? "64px" : "200px";
    },
    userName() {
      const username = this.$store.state.username + "";
      return this.isCollapse
        ? username.replace(/\s$/, "").match(/.{1}$/)[0]
        : username;
    }
  },
  data() {
    return {
      isCollapse: false
    };
  }
};
</script>
<style lang="scss" scoped>
.el-menu--collapse {
  box-sizing: border-box;
}
.aya-circle {
  position: relative;
  padding: 0;
  text-align: center;
  & > .aya-circle--name {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 4em;
    height: 4em;
    line-height: 4em;
    border-radius: 50%;
    text-align: center;
    background: rgb(102, 177, 255);
    color: rgb(255, 255, 255);
  }
  & > .aya-circle--index {
    color: #7fcc59;
    font-size: 14px;
    vertical-align: bottom;
  }
  & > .aya-circle--tool {
    position: absolute;
    right: 10px;
    vertical-align: top;
  }
}
.aya-circle.aya-mini {
  height: 60px;
  & > .aya-circle--name {
    width: 2em !important;
    height: 2em !important;
    line-height: 2em !important;
  }
  & > .aya-circle--index {
    display: none;
  }
  & > .aya-circle--tool {
    right: 16px;
    top: 34px;
    z-index: 1;
  }
}
</style>
